<template>
	<view class="container">
		<u-sticky>
			<view class="customHeader" :style="{ paddingTop: menuButtonInfo.top + 'px' }">
				<view class="goBack" @click="goBack">
					<uni-icons type="left" size="20"></uni-icons>
				</view>
				<view class="title" :style="{ height: menuButtonInfo.height + 'px' }">
					消息中心
					<image class="clear" @click="clearTips" src="/static/images/clear.png"></image>
				</view>
			</view>
		</u-sticky>
		<view class="list" v-if="list.length">
			<block v-for="(item, index) in list" :key="index">
				<view :class="['list-item', { weidu: item.status == 0 }]" @click="gotoPage(item.id)">
					<view class="left">
						<image class="messageIcon" src="/static/images/messageIcon.png"></image>
						<view class="info">
							<view class="title">{{ item.title }}</view>
							<view class="content">{{ item.content }}</view>
						</view>
					</view>
					<view class="time">{{ item.time }}</view>
				</view>
			</block>
		</view>
		<view class="empty" v-else>
			<u-empty mode="message"></u-empty>
		</view>
		<uni-popup type="center" ref="msgPopup">
			<view class="popup-container">
				<view class="popup-title">将所有消息标记为已读？</view>
				<view class="btn-group">
					<view class="btn cancel" @click="cancel">取消</view>
					<view class="btn confirm" @click="confirm">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { get, post } from '@/request/index.js';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';

// 获取屏幕边界到安全区域距离
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
//返回
const goBack = () => {
	uni.navigateBack({
		delta: 1
	});
};
onLoad(async () => {
	await getDataList();
});
//清除消息提醒
const msgPopup = ref();
const clearTips = () => {
	msgPopup.value.open();
};
const cancel = () => {
	msgPopup.value.close();
};
const confirm = async () => {
	const res = await post('agent/notice/clean');
	pageData.page = 1;
	getDataList();
	msgPopup.value.close();
};
//获取消息列表数据
const pageData = reactive({
	page: 1,
	totalPage: 1
});
const list = reactive([]);
const getDataList = async () => {
	const res = await get('agent/notice/list');
	const { code, data } = res;
	if (code == 200) {
		data.data.forEach((item) => {
			list.push(item);
		});
		pageData.totalPage = data.last_page;
	}
};
onReachBottom(() => {
	pageData.page++;
	if (pageData.page > pageData.totalPage) return uni.showToast({ title: '我也是有底线的' });
	getDataList();
});
const gotoPage = (id) => {
	uni.navigateTo({
		url: `/pages/messagedetail/messagedetail?id=${id}`
	});
};
//
</script>

<style scoped lang="scss">
.container {
	background-color: #fff;
}
.customHeader {
	position: relative;
	width: 100%;
	background-color: #fff;
	z-index: 1;
	.goBack {
		position: absolute;
		left: 28rpx;
		margin-top: 10rpx;
		z-index: 2;
	}
	.title {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		color: #363646;
		.clear {
			width: 48rpx;
			height: 48rpx;
			margin-left: 8rpx;
		}
	}
}
.list {
	padding: 20rpx 28rpx 80rpx;
	&-item {
		display: flex;
		justify-content: space-between;
		padding: 40rpx 0;
		border-bottom: 2rpx solid #ececec;
		.time {
			font-size: 28rpx;
			color: #ccc;
		}
		.left {
			display: flex;
			align-items: center;
		}
		.messageIcon {
			width: 80rpx;
			height: 80rpx;
		}
		.info {
			padding-left: 16rpx;
		}
		.title {
			height: 40rpx;
			line-height: 32rpx;
			font-size: 32rpx;
			color: #9c9c9c;
		}
		.content {
			height: 40rpx;
			line-height: 50rpx;
			font-size: 24rpx;
			color: #ccc;
		}
	}
	.weidu {
		.title {
			color: #000;
		}
		.content {
			color: #666;
		}
	}
}
.empty {
	height: 80%;
}
</style>
